<script setup lang="ts">
import { computed } from "vue";
import stars from "assets/stars.jpg";
import { isDark } from "src/composables";

const lightBgImage = stars;
const darkBgImage = "";

const mineStyle = computed(() => {
  return {
    backgroundImage: `url('${isDark.value ? darkBgImage : lightBgImage}')`,
  };
});
</script>

<template>
  <section
    class="vast-container flex flex-col min-h-screen text-center bg-cover bg-center bg-fixed relative w-full h-full"
    :style="mineStyle"
  >
    <BaseHeader />
    <main class="h-full w-full relative box-border overflow-hidden">
      <router-view />
    </main>
    <Pioneers />
  </section>
</template>

<style lang="less" scoped>
.vast-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
